HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
شیوه تعریف عناصر HTML[/caption]
ساختار عناصر HTML
شیوه تعریف عناصر HTML به صورت زیر می باشد:(ایران گستر )
<tagname> محتوا در این قسمت قرار میگیرد </tagname>
بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:(ایران گستر )
<p>My first paragraph.</p>
نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.(ایران گستر )
«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:
|
|
<!DOCTYPE html>
<html>
<body>
<p>Thisisa<br>paragraph withaline break.</p>
</body>
</html>
|
برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید.
در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:(ایران گستر )
<br />
توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.
عناصر تو در تو (nested)
عناصر HTML می توانند به صورت تو در تو یا nested قرار بگیرند؛ این یعنی یک عنصر داخل عنصر دیگری باشد.
به طور مثال در کد زیر چهار عنصر HTML وجود دارد:(ایران گستر )
|
|
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
|
اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:(ایران گستر )
|
|
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
|
حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.(ایران گستر )
تگ های پایانی
زبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.(ایران گستر )
در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال:
|
|
<!DOCTYPE html>
<html>
<body>
<p>Thisisaparagraph.
<p>Thisisaparagraph.
</body>
</html>
|
در مثال بالا تگ های پایانی عنصر <p> را قرار نداده ایم اما هنوز هم صفحه ی ما نمایش داده می شود. برای اجرای این کد در مرورگرتان روی این لینک کلیک کنید.(ایران گستر )
در واقع تگ آغازین در مثال بالا دلخواه فرض شده است اما جدا هشدار می دهیم که هیچ گاه به این شکل کدنویسی نکنید چرا که:
- این خطا ها برخی اوقات صفحه ی شما را کاملا به هم میریزد و اینطور نیست که همیشه برایتان بدون هزینه باشد.
- حتی اگر صفحه به درستی نمایش داده شود، موتور های جست و جو آن را به عنوان خطا و HTML غیر معتبر می بینند. بنابراین در نتایج جست و جو جریمه می شوید.
- هنگام ویرایش کدهایتان به مشکل برمی خورید چرا که همه چیز به هم ریخته خواهد شد و سر و ته هیچ چیز مشخص نخواهد بود.(ایران گستر )
بزرگی و کوچکی حروف
در زبان HTML بزرگی و کوچکی حروف اهمیتی ندارد بنابراین <P> با <p> یکی است اما تقریبا در تمام دنیا شیوه ی کدنویسی HTML به صورت حروف کوچک است. شما می توانید همین الان به هر سایتی که دوست دارید سر بزنید و کد های HTML آن را مشاهده کنید. 99 درصد سایت های جهان به حروف کوچک HTML می نویسند. همچنین سندهایی که سخت گیری های بیشتری از HTML دارند (مانند XHTML) حروف بزرگ را قبول نمی کنند. بر همین اساس ما در تمام کدنویسی ها و پروژه های آینده از حروف کوچک استفاده می کنیم.(ایران گستر )
XHTML چیست؟
زبان XHTML مخفف EXtensible HyperText Markup Language (به معنای «زبان امتدادپذیر نشانه‌گذاری فرامتنی») است. در واقع این زبان دقیقا با زبان HTML یکی است و تنها تفاوت آن با HTML در این است که دارای قوانین سخت گیرانه تری می‌باشد.
به عبارت دیگر می توانیم بگوییم XHTML همان HTML است که به عنوان یک برنامه ی XML تعریف شده است. از نظر پشتیبانی نیز خیالتان راحت باشد، XHTML توسط تمام مرورگر های جدید پشتیبانی می شود.(ایران گستر )
سوالی که پیش می آید این است که چرا باید از این زبان استفاده کنیم؟ پاسخ ساده است. اگر به کد زیر نگاه کنید، می فهمیم که دارای نقص هایی است:
|
|
<html>
<head>
<title>Thisisbad HTML</title>
<body>
<h1>Bad HTML
<p>Thisisaparagraph
</body>
|
مانند مثال قبلی ما، تگ های پایانی اش جا افتاده اند.
مرورگر های جدید ویندوز و مکینتاش و لینوکس و … توانایی حدس زدن و صحیح نمایش دادن این کد را دارند اما دستگاه های کوچکتر مانند گوشی های موبایل ممکن است نتوانند این کد را تصحیح کنند و محتوای صفحه را به هم ریخته نمایش دهند.(ایران گستر )
حتما با خودتان می گویید من هیچ گاه چنین کاری انجام نمی دهم و حواسم به تگ های پایانی هست. مشکل آن جاست که مسئله فقط تگ های پایانی نیست، زبان HTML اجازه می دهد بسیاری از موارد غیر استاندارد را اجرا کنید و زمانی که کد هایتان تبدیل به 800 خط، 1000 خط و بیشتر شد احتمال خطا بسیار بالا می رود.(ایران گستر )
:: بازدید از این مطلب : 20
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
